<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
    <!--  搜索框样式  -->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入zTree样式   -->
    <link rel="stylesheet" href="../../style/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

</head>
<style>
    h1{
        text-align: center;
    }
    #checkAll, .check {
        width: 20px;
        height: 20px;
    }
    #add_btn {
        background: #009688;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-right: 10px;
    }
    #del_btn {
        background: #e4606d;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-top: 10px;
        margin-left: 20px;
    }
    /*搜索框1*/
    .bar1 {
        width: 455px;
        height: 40px;
        display: inline-block;
        margin-left: 33px;
    }

     #jobTitle {
        width: 285px;
        height: 40px;
        color: #0f6674;
        font-weight: bold;
        border-radius: 7px;
    }

    #sous_btn {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 56px;
    }

    #sous_form {
        width: 810px;
    }

    .bar1 input {
        border: 2px solid #7BA7AB;
        border-radius: 5px;
        background: #F9F0DA;
        color: #9E9C9C;
    }

    .bar1 button {
        top: 0;
        right: 0;
        background: #7BA7AB;
        border-radius: 0 5px 5px 0;
    }

    .bar1 button:before {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 16px;
        color: #F9F0DA;
    }
    label {
        font-weight: bold;
        font-size: 20px;
    }
    #job-tab{
        margin-top: 15px;
        background: #f8f9fa;
    }
    #tr_text td{
       font-weight: bold;
    }
    #upd_btn {
        background: orange;
        height: 43px;
        width: 91px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
    }
    #upd_btn2{
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
</style>
<body>
    <div id="jobContent">
        <div class="container-fluid">
            <!--   row   一行  -->
            <div class="row">
                <div class="col-xl-12" id="top_div">
                    <div class="search bar1">
                        <form id="sous_form">
                            <label>职位：</label>
                            <input id="jobTitle" name="jobTitle" type="text" placeholder="按职位搜索员工...">
                            <button id="sous_btn" type="button" @click="search"></button>
                        </form>
                    </div>
                    <button type="button" id="add_btn" @click="add">
                        添加
                    </button>
                    <button type="button" id="del_btn" @click="del">删除</button>
                </div>
            </div>
        </div>
        <table id="job-tab" class="table table-hover">
            <tr id="tr_text">
                <td><input type="checkbox" id="checkAll" @click="allCheck"></td>
                <td>ID</td>
                <td>职位名称</td>
                <td>菜单权限</td>
            </tr>
            <tr v-for="job in list" id="tr_text2">
                <td><input @click="isCheckAll" type="checkbox" :value="job.jobId" class="check"></td>
                <td>{{job.jobId}}</td>
                <td>{{job.jobTitle}}</td>
                <td><button id="upd_btn" @click="openUpd(job.jobId)" type="button">
                    修改权限
                </button></td>
            </tr>
        </table>

        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">请修改职位的权限</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <input type="hidden" id="jobId">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button id="upd_btn2" @click="updJobMenu">保存修改</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>

    </div>



<script src="../../style/jquery-3.3.1.js"></script>
<script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
<script src="../../style/vue.js"></script>
<script src="../../my1.1.js"></script>
<script src="../../style/zTree_v3/js/jquery.ztree.all.js"></script>
<script>
    let zTreeObj;
    $(function () {
        let app = new Vue({
            el: '#jobContent',
            data: selAllJob,
            methods: {
                openUpd: function (jobId) { //回显
                    //给模态框中的隐藏域赋值
                    $("#jobId").val(jobId);
                    //查询当前点击的职位权限
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, selMenuByJobId(jobId));
                    $('#myModal').modal('show');
                },
                updJobMenu:function () {   //修改
                    // 把id和 修改后的菜单列表传入ajax
                    let nodeArray = zTreeObj.getCheckedNodes();
                    let jobId = $("#jobId").val();
                    $.ajax({
                        type: "post",
                        url: "../../JobController/updJobMenu",
                        data: {"jobId": jobId, "nodeArray": JSON.stringify(nodeArray)},
                        dataType: "json",
                        success: function (json) {
                            location.href="jobTitle.html";
                        }
                    });

                },
                allCheck: function () {
                    eventHub.$emit('allCheck', null);
                },
                isCheckAll: function () {
                    eventHub.$emit('isCheckAll', null);
                },
                add:function (){
                    location.href="add_job.html";
                },
                search:function (){

                },
                del: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法规定为每个匹配元素规定运行的函数
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }

                    })
                    // ajax把拼接的id传入到后台
                    $.ajax({
                        type: "post",
                        url: "../../JobController/delJobTitle",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            alert(data.message);
                            location.href="jobTitle.html";
                        }
                    })
                }
            }
        })
    })

    function selAllJob() {
        let data;//声明，然后在上边调用
        $.ajax({
            type: "post",
            data: {},
            url: "../../JobController/selAllJob",
            async: false,
            dataType: "json",
            success: function (json) {
                data = json;//把json对象赋值给data,然后返回
            }
        })
        return data;
    }

    //---------------------------------------------- zTree

    let setting = {
        check: {
            enable: true,//true 、 false 分别表示 显示 、不显示 复选框或 单选框
            chkStyle: "checkbox",
            chkboxType: {"Y": "ps", "N": "ps"}
        },
        data: {
            key:{
                name:"menuName"//zTree 节点数据保存节点名称的属性名称  默认值："name"
            },
            simpleData: {
                enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "menuId",//节点数据中保存唯一标识的属性名称
                pIdKey: "menuPid",//节点数据中保存其父节点唯一标识的属性名称
                rootPId: 0        //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            }
        }

    };
    /**
     * 查询菜单列表 根据职位Id
     */
    function selMenuByJobId(jobId) {
        let zNodes;
        $.ajax({
            type: "post",
            url: "../../Menu/selMenuByJobId",
            data: {jobId: jobId},
            dataType: "json",
            async: false,
            success: function (json) {
                zNodes = json.list;
            }
        });
        return zNodes;
    }



</script>

</body>
</html>